<template>
  <vxe-grid
    :ref="refName"
    :row-config="{isHover: true}"
    :id="id"
    :data="dataSource"
    :columns="columns"
    :toolbar-config="toolbarConfig"
    :edit-config="editConfig"
    :edit-rules="editRules"
    :height="height"
    :max-height="maxHeight"
    :auto-resize="autoResize"
    :keep-source="keepSource"
    :border="border"
    :loading="loading"
    :show-header-overflow="showHeaderOverflow"
    :show-overflow="showOverflow"
  >
    <template v-for="(x, slotName) in $scopedSlots" v-slot:[slotName]="context">
      <slot :name="slotName" v-bind="context" />
    </template>
    <template #pager>
      <vxe-pager
        v-if="pagination.total"
        :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        :current-page.sync="pagination.current"
        :page-size.sync="pagination.size"
        :total="pagination.total"
        :page-sizes="pageSizes"
        @page-change="handlePageChange">
      </vxe-pager>
    </template>
  </vxe-grid>
</template>
<script>
export default {
  name: 'AdvancedGrid',
  props: {
    refName: {
      type: String,
      default () {
        return 'grid';
      },
    },
    id: {
      type: String,
      default () {
        return null;
      },
    },
    dataSource: {
      type: Array,
      default () {
        return [];
      },
    },
    columns: {
      type: Array,
      default () {
        return [];
      },
    },
    toolbarConfig: {
      type: Object,
      default () {
        return null;
      },
    },
    editConfig: {
      type: Object,
      default () {
        return {};
      },
    },
    editRules: {
      type: Object,
      default () {
        return {};
      },
    },
    height: {
      type: Number,
      default: null,
    },
    maxHeight: {
      type: Number,
      default: 10000,
    },
    autoResize: {
      type: Boolean,
      default: false,
    },
    keepSource: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: true,
    },
    showHeaderOverflow: {
      type: Boolean,
      default: true,
    },
    showOverflow: {
      type: Boolean,
      default: true,
    },
    pagination: {
      type: Object,
      default () {
        return {
          current: 1,
          total: 0,
          size: 10,
        }
      },
    },
    pageSizes: {
      type: Array,
      default () {
        return [10, 50, 100, 200]
      }
    },
    selectionChange: {
      type: Function,
      default: () => {},
    },
    checkSelectable: {
      type: Function
    },
  },
  data () {
    return {

    };
  },
  mounted () {
    // console.log('Advanced table mounted :>> ', this);
    // this.$nextTick(() => {
    //   this.$emit('toggleRowSelection', this.$refs.multipleTable);
    // });
  },
  methods: {
    handlePageChange ({ type, currentPage, pageSize }) {
      if (type === 'size') {
        this.$emit('pageSizeChange', pageSize)
      }
      if (type === 'current') {
        this.$emit('pageChange', currentPage)
      }
    },
  }
}
</script>
<style lang="less" scoped>
</style>
